<template>
  <div v-loading="loading">
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <span style="color:cornflowerblue">账单信息</span>
          <hr />
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="2">
                  <br />
                  <el-row>
                    <el-col style="margin-top: 15px;" :span="24">
                      <div>
                        <span style="font-size:20px;color:blue">&nbsp;&nbsp;&nbsp;&nbsp;{{ ruleFormd.futureMoney }}</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <span>入账单剩余金额</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-divider style="height: 100px;" direction="vertical"></el-divider>
                <el-col style="margin-top: 15px;" :span="6">
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <span>&nbsp;&nbsp;&nbsp;来款单位：</span>{{ ruleFormd.billingUnit }}
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <span>财务到款时间：</span>{{ ruleFormd.billingTime }}
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <span>入账单总金额：</span>{{ ruleFormd.billingMoney }}
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="13"></el-col>
                <el-col style="text-align:right;margin-top: 15px;" :span="2">
                  <el-row>
                    <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark"
                      @selection-change="handleSelectionChange">
                      <el-table-column label="入账单下载">
                        <template #default="scope">
                          <el-link @click="downloadAppendix(scope.row.appendixUrl)">下载</el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="4">
              <el-button type="primary" @click="below()">项目经费下拨</el-button>
              <el-button type="primary" @click="back()">返回入账单列表</el-button>
            </el-col>
            <el-col :span="18"></el-col>
            <el-col :span="2">
              <button @click="add()">删除</button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="billingTime" label="财务到账时间"> </el-table-column>
        <el-table-column prop="projectId" label="项目编号"> </el-table-column>
        <el-table-column prop="projectName" label="科研项目名称"> </el-table-column>
        <el-table-column prop="projectScoreunit" label="项目来源单位"> </el-table-column>
        <el-table-column prop="projectPerson" label="项目负责人"> </el-table-column>
        <el-table-column prop="projectMoney" label="A项目总经费(万元)"> </el-table-column>
        <el-table-column label="B剩余总经费(万元)"><template #default="scope">{{ scope.row.projectMoney -
          scope.row.accounting / 10000 }}</template> </el-table-column>
        <el-table-column label="C剩余可报销总经费(万元)"><template #default="scope">{{ scope.row.projectMoney -
          scope.row.accounting / 10000 }}</template> </el-table-column>
        <el-table-column label="D已到账总经费(万元)"><template #default="scope">{{ scope.row.accounting / 10000 }} </template>
        </el-table-column>
        <el-table-column label="E本次到账经费(万元)"><template #default="scope">{{ scope.row.allocationExpenditure / 10000 }}
          </template> </el-table-column>
        <el-table-column label="F未下拨经费(万元)"><template #default="scope">{{ scope.row.projectMoney -
          scope.row.accounting / 10000 }}</template> </el-table-column>
        <el-table-column prop="progress" label="流程">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-link
            v-for="(item, index) in scope.row.operate"
            :key="index"
            size="mini"
            type="warning"
            @click="Audit(index, item, scope.row.allocationId)"
            >{{ item.Name }}</el-link>&nbsp;
            <el-link @click="detailData(scope.$index,scope.row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="详情" v-model="dialogPutVisible">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="分配编号">
            {{ ruleFormds.allocationId }}
          </el-descriptions-item>
          <el-descriptions-item label="来款单位">
            {{ ruleFormds.billingUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="到账时间">
            {{ ruleFormds.billingTime }}
          </el-descriptions-item>
          <el-descriptions-item label="到账金额(元)">
            {{ ruleFormds.daoMoney }}
          </el-descriptions-item>
          <el-descriptions-item label="银行卡号">
            {{ ruleFormds.billingBank }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>

export default {
  props: { id: undefined },
  data() {
    return {
      loading:false,
      tableData: [],
      dialogPutVisible: false,
      ruleFormd: [],
      ruleFormds:[],
      tableData1:[],
    };
  },
  created() {
    this.show(),
      this.GetDetail()
  },
  methods: {
    //列表显示
    show() {
      this.loading=true;
      //使用构造的URL将HTTP GET请求发送到服务器。
      let url = "api/tb_project_billing_allocation/list?id=" + this.$route.query.id;
      this.http.get(url, {}, true).then((res) => {
        console.log(res)
        if (res.status) {
            console.log(res.data.list);
            res.data.forEach((element) => {
              if (element.operate == "") {
                element.operate = [];
              } else {
                element.operate = JSON.parse(element.operate);
              }
            });
        }
        //接收到响应后，将数据记录到控制台并分配给tableData属性，该属性用于显示表中的信息。
        this.tableData = res.data;
        this.loading=false;
      });
      

    },
     Audit(index, row, id) {
      this.$router.push("/tb_project_billing_allocation_process?id=" + id+"&stepId="+row.Field);
    },
    //项目经费下拨
    below() {
      let ids = this.$route.query.id;
      this.$router.push("/tb_project_billing_allocation?id=" + ids);
    },
    //反填
    GetDetail() {
      let url = "api/tb_project_billing/GetDetailBiillingList?id=" + this.$route.query.id;
      this.http.get(url, {}, true).then((res) => {
        this.ruleFormd = res.data[0];
        this.tableData1 = res.data;
      })
    },
    //跳转到入账单列表
    back() {
      this.$router.push('/tb_project_billingList');
    },
    //附件下载
    downloadAppendix(url) {
      //打开外部浏览器地址，下载文件
      window.open(url);
    },
    //详情
    detailData(index,row){
      this.dialogPutVisible=true
      console.log(row.allocationId)
      this.http.get('api/tb_project_billing_allocation/billingAllocationDetail?id='+row.allocationId).then((res=>{
        if(res.status){
          this.ruleFormds=res.data[0];
        }
      }))
    }
  }
}
</script>

<style>
/* .el-select .el-input {
  width: 130px;
} */

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>